<template>
  <div class="app-container">
    <!--操作区-->
    <el-row class="search-collapse">
      <el-col :span="24">
        <el-button type="primary" plain class="el-icon-plus"  @click='addForm'>新增</el-button>
      </el-col>
    </el-row>

    <!--数据显示区-->
    <el-row class="select-table table-striped">
      <el-col :span="24">
        <el-table :data="responseVO.data" style="width: 100%;margin-bottom: 20px;" border default-expand-all >
          <el-table-column prop="id" label="后台用户ID"></el-table-column>
          <el-table-column prop="loginName" label="用户账号"></el-table-column>
          <el-table-column label="用户性别">
            <template slot-scope="scope">
              <span v-if="scope.row.sex === 0">男</span>
              <span v-else-if="1">女</span>
              <span v-else>未知</span>
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号码"></el-table-column>
          <el-table-column prop="avatar" label="头像地址"></el-table-column>
          <el-table-column label="帐号状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0" effect="dark">正常</el-tag>
              <el-tag type="danger" v-else effect="dark">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="权限">
            <template slot-scope="scope">
              <el-select v-model="scope.row.roleIds" disabled multiple placeholder="暂无权限">
                  <el-option
                    v-for="role in roleData"
                    :key="role.roleId"
                    :label="role.roleName"
                    :value="role.roleId">
                  </el-option>
                </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="loginIp" label="最后登陆IP"></el-table-column>
          <el-table-column prop="loginDate" label="最后登录日期" sortable></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="editForm(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchFrom.pageNumber"
          :page-sizes="[5, 10, 20, 40]" :page-size="searchFrom.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="responseVO.total">
        </el-pagination>
      </el-col>

      <el-dialog :title="title" :visible="dialogFormVisible" :show-close="false" width="560px">
        <el-form :model="form" ref="form">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户账号" :label-width="formLabelWidth" prop="loginName">
                <el-input v-model="form.loginName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号码" :label-width="formLabelWidth" prop="mobile">
                <el-input v-model="form.mobile"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户性别" :label-width="formLabelWidth" prop="sex">
                <el-select v-model="form.sex" placeholder="请选择">
                   <el-option v-for="s in sex" :key="s.id" :label="s.name" :value='s.id'></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
                <el-radio-group v-model="form.status">
                  <el-radio :label= "0" >正常</el-radio>
                  <el-radio :label= "1" >停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="24">
            <el-form-item label="角色" :label-width="formLabelWidth">
              <el-select v-model="form.roleIds" multiple placeholder="请选择">
                  <el-option
                    v-for="role in roleData"
                    :key="role.roleId"
                    :label="role.roleName"
                    :value="role.roleId">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveForm">确 定</el-button>
        </div>
      </el-dialog>


    </el-row>
  </div>
</template>

<script>
  import adminService from '@/service/adminService'
  //vue规范
  export default {
    //初始化数据
    data() {
      return {
        searchFrom: {
          pageNumber: 1,
          pageSize: 5
        },
        //对话框
        dialogFormVisible: false,
        title: '新增',
        formLabelWidth: '100px',
        //分页数据对象
        responseVO: {
          total: 0,
          data: []
        },
        //向后台提交的数据
        form: {
          loginName: undefined,
          mobile: undefined,
          sex: 0,
          status: 0,
          roleIds: []
        },
        //角色数据
        roleData: [],
        sex:[
          {id:0,name:'男'},
          {id:1,name:'女'},
          {id:2,name:'未知'},
        ]
      }
    },
    //vue管理的方法
    methods: {
      handleTreeCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
      handleSizeChange(val) {
        this.searchFrom.pageSize = val
        adminService.loadData()
      },
      handleCurrentChange(val) {
        this.searchFrom.pageNumber = val
        adminService.loadData()
      },
      //编辑按钮事件
      editForm(data) {
        adminService.editForm(data);
      },
      saveForm() {
        adminService.saveForm()
      },
      addForm() {
        adminService.addForm()
      }
    },
    //初始化调用方法
    created() {
      adminService.init(this)
      adminService.loadData()
    }
  }
</script>
